// 一个组件就是一个函数
import React, { useState } from 'react';
import HelloComponent from './hello';
import NameEditComponent from './nameEdit'
import './index.css'

// 1.组件化
const App = () => {
  //2. data
  // data+setData的综合体
  const [name, setName] = useState("initialName")
  // console.log(name);
  // console.log(useState("initialName"));
  // console.log(setName);
  // setTimeout(() => {
  //     setName('杨执信')
  // }, 1000)
  const setUsernameState = (event) => {
    console.log(event);
    setName(event.target.value)
  }
  return (
    <div className="demo">
      <HelloComponent userName={name} />
      <NameEditComponent userName={name} Change={setUsernameState} />
    </div>
  )
}
export default App; //模块化输出App根组件